import React, { useState, useEffect } from "react";
import { Select, Button } from "antd";
import Left from "@/media/model/left.png";
import Between from "@/media/model/between.png";
import "../index.css";
const App = ({ handleCancel }) => {
  const [tab, setTab] = useState(1);  // 1 表示左对齐，2 表示居中对齐   
  const changeTab = (val) => {
    setTab(val);
  }
  const onChange = (value) => {
    console.log(`selected ${value}`);
  };
  return (
    <>
      <div className="content-top h-[480px]">
        <div className="flex flex-col text-[14px] text-theme-text-default">
          <p className="font-semibold mb-[12px]">主题</p>
          <Select
            className="w-full text-number-input"
            defaultValue={3}
            onChange={onChange}
            options={[
              { value: "深色", label: "深色" },
              { value: "浅色", label: "浅色" },
            ]}
          />
        </div>

        <div className="flex flex-col text-[14px]  my-[24px]">
          <p className="font-semibold mb-[12px]">语言</p>
          <Select
            className="w-full text-number-input"
            defaultValue={3}
            onChange={onChange}
            options={[
              { value: "中文", label: "中文" },
              { value: "英文", label: "英文" },
            ]}
          />
        </div>
        <div className="flex flex-col text-[14px]">
          <p className="font-semibold mb-[12px]">消息对齐方式</p>
          <div className="flex items-center">
            <div
              className={`flex items-center justify-center px-[18px] py-[12px] rounded-[8px] mr-[24px] bg-theme-modal-alignment cursor-pointer ${tab == 1 ? "active" : ""}`}
              onClick={() => {
                changeTab(1);
              }}
            >
              <img src={Between} alt="Between" className="w-[186px] h-[58px]" />
            </div>
            <div
              className={`flex items-center justify-center px-[18px] py-[12px] rounded-[8px] bg-theme-modal-alignment cursor-pointer cursor-pointer ${tab == 2 ? "active" : ""}`}
              onClick={() => {
                changeTab(2);
              }}
            >
              <img src={Left} alt="Left" className="w-[186px] h-[58px]" />
            </div>
          </div>
        </div>
      </div>
      <div className="content-bottom flex items-center justify-end">
        <Button color="default" variant="link" onClick={handleCancel}>
          取消
        </Button>
        <Button type="link">重置</Button>
        <Button color="primary" variant="link">
          保存
        </Button>
      </div>
    </>
  );
};
export default App;
